import 'package:flutter/material.dart';

class MyApp20 extends StatelessWidget {
  const MyApp20({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CustomScrollView整合ListView和GridView')),
      body: CustomScrollView(
        slivers: [
          // 1. 上部分：展示网格布局
          SliverGrid.builder(
            // 主轴(垂直)默认为垂直方向，此属性用于固定侧轴(水平)方向子元素的个数
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, // 1.1 设置侧轴方向子元素个数，此时每行展示的子元素个数是固定的
              mainAxisSpacing: 5.0, // 1.2 主轴(垂直)方向子元素间距
              crossAxisSpacing: 5.0, // 1.3 侧轴(水平)方向子元素间距
              childAspectRatio: 4 / 3, // 1.4 子元素宽高比，默认宽高相同 1: 1
            ),
            // 子元素数量
            itemCount: 6,
            // 构造子元素
            itemBuilder: (BuildContext context, int index) {
              return Container(
                color: Colors.pink,
                alignment: Alignment.center,
                child: Text('传智播客 $index'),
              );
            },
          ),
          // 3. 上下两部分的间距
          const SliverPadding(padding: EdgeInsets.only(bottom: 5)),
          // 2. 下部分：展示列表布局 (delegate类似于ListView的builder构造方法)
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  padding: const EdgeInsets.only(bottom: 5),
                  child: Container(
                    height: 120.0,
                    color: Colors.orange,
                    alignment: Alignment.centerLeft,
                    child: Text('传智教育 $index'),
                  ),
                );
              },
              // 子元素个数
              childCount: 10,
            ),
          ),
        ],
      ),
    );
  }
}
